<template>
  <div>
    <!-- 私聊互动通知 -->
    <div class="topbox">
      <van-tabs
        v-model="active"
        class="topboxone"
        color="#53C2F7"
        line-width="30px"
        line-height="5px"
      >
        <van-tab title="私聊"></van-tab>
        <van-tab title="互动"></van-tab>
        <van-tab title="通知"></van-tab>
      </van-tabs>
      <!-- 客服小壹更多 -->
      <div class="icon">
        <div class="icon-ellipsis">
          <van-icon name="ellipsis" />
          <span>更多</span>
        </div>
        <div class="icon-service">
          <van-icon name="service-o" />
          <span>客服小壹</span>
        </div>
      </div>
    </div>

    <!-- 全部、服务 -->
    <div class="button">
      <van-tabs v-model="activeName">
        <van-tab title="全部" name="a">
          <div class="libox" @click="gochat">
            <div class="img">
              <img
                :src="require('../../assets/img/message-image/组 3@2x.png')"
                alt=""
              />
            </div>
            <div class="title">
              <p>咨询顾问大宇</p>

              <p class="titles">可以说说自己的情况和诉求哦</p>
              <span>06-16</span>
            </div>
          </div>

          <div class="libox">
            <div class="img">
              <img
                :src="require('../../assets/img/message-image/组 3@2x.png')"
                alt=""
              />
            </div>
            <div class="title">
              <p>咨询顾问大宇</p>

              <p class="titles">可以说说自己的情况和诉求哦</p>
              <span>06-16</span>
            </div>
          </div>
        </van-tab>

        <van-tab title="服务中" name="b">
          <div class="libox">
            <div class="img">
              <img
                :src="require('../../assets/img/message-image/组 3@2x.png')"
                alt=""
              />
            </div>
            <div class="title">
              <p>jajjajaj</p>
              <p class="titles">标题22</p>
              <span>13:00</span>
            </div>
          </div>
        </van-tab>

        <van-tab title="服务过" name="c">
          <div class="libox">
            <div class="img">
              <img
                :src="require('../../assets/img/message-image/组 3@2x.png')"
                alt=""
              />
            </div>
            <div class="title">
              <p>jajjajaj</p>
              <p class="titles">标题222</p>
              <span>13:00</span>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { useRouter } from "vue-router";
export default {
  data() {
    const active = 2;
    const activeName = "";
    return {
      active,
      activeName,
    };
  },
  setup() {
    const route = useRouter();
    const gochat = () => {
      route.push("/chat");
    };
    return {
      gochat,
    };
  },
};
</script>
<style lang="less" scoped>
.van-tabs {
  width: 50%;
  float: left;
}
.icon {
  width: 50%;
  display: flex;
  flex-direction: row-reverse;
  span {
    font-size: 10px;
  }
}
.icon-service,
.icon-ellipsis {
  display: flex;
  flex-direction: column;
  margin-top: 5px;
  text-align: center;
}
.icon-ellipsis {
  margin-left: 15px;
  margin-right: 10px;
}
.van-button {
  border: none;
}
// 按钮
.button {
  width: 370px;
}
.van-tabs {
  width: 50%;
  float: left;
}
.button .libox {
  width: 375px;
  height: 80px;
  display: flex;
}
.libox .img {
  width: 80px;
  height: 80px;
  margin: 9px;
  img {
    width: 100%;
    height: 100%;
  }
}

.title {
  height: 80px;
  width: 80%;
  margin-top: 9px;
  border-bottom: 1px solid #ccc;
  p {
    font-size: 18px;
  }
  .titles {
    font-size: 15px;
    color: #ccc;
  }
  span {
    float: right;
    margin-top: -90px;
    font-size: 16px;
    margin-right: 10px;
    color: #ccc;
  }
}
</style>
